<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
</head>
<body>
<div class="layui-container" style="margin-top: 50px;">

    <div class="layui-container" style="width: 500px;height: 330px;padding-top: 60px;">
        <form class="layui-form" action="" method="post"  enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">编号：</label>
                <div class="layui-inline">
                    <input type="text" id="id" name="id"  lay-verify="required" readonly="" autocomplete="off"  class="layui-input" >
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称：</label>
                <div class="layui-inline">
                    <input type="text" id="nickname" name="nickname"  lay-verify="required" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-inline">
                    <input type="radio" id="man" name="sex" value="男" title="男" >
                    <input type="radio" id="lady" name="sex" value="女" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话：</label>
                <div class="layui-inline">
                    <input type="text" id="telephone" name="telephone"  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">logoUrl：</label>
                <input type="file"  accept="image/jpg,image/png,image/jpeg" class="form-control"
                       name="image" id="image" placeholder="**">
                <div class="layui-inline">
                    <img class="layui-upload-img" id="imageshow" name="imageshow">-->
<!--                    <input type="text" id="logoUrl" name="logoUrl"  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">-->
                </div>

            </div>

            <div class="layui-form-item">
                <input type="button" class="layui-btn" lay-submit="" id="commit" style="margin-left: 160px;" value="提交"></input>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script>
    layui.use(['form', 'element','jquery','upload'], function(){
        var form = layui.form;
        var element = layui.element;

        var $ = layui.$;
        $(function() {
            var str = window.location.href;
            var id = str.split('=')[1];
            var token = layui.data('token').data;
            $.ajax({
                type: 'get',
                url: '/user/findById/'+id,
                dataType: "json",
                data: {

                },
                headers:{"token":token},
                success: function(result) {
                    $("#id").val(result.id);
                    $("#nickname").val(result.nickname);
                    $("#man").attr("checked",result.sex == "男"?true:false);
                    $("#lady").attr("checked",result.sex == "女"?true:false);
                    // $("#logoUrl").val(result.logoUrl);
                    $("#imageshow").attr("src",result.logoUrl);
                    $("#telephone").val(result.telephone);
                    //元素更新必须使用,否则没有效果
                    form.render();
                },
                error: function(error) {
                    alert(error);
                }

            });

        });
    });
        // //自定义验证规则
        // form.verify({
        //     price: [/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, "请输入正确的价格"]
        // });
</script>
<script>
    $(function(){

        $("#commit").click(function () {

            var id = $("#id").val();
            var nickname = $("#nickname").val();
            var password = $("#password").val();
            var telephone = $("#telephone").val();
            var address = $("#address").val();
            var sex = $('input[type=radio][name=sex]:checked').val();
            // 获取图片
            var logoUrl = document.getElementById("image");
            var file = logoUrl.files[0];
            console.log(id);
            console.log(sex);

            var formdata=new FormData();
            formdata.append("image",file);
            formdata.append("id",id);
            formdata.append("nickname",nickname);
            formdata.append("password",password);
            formdata.append("sex",sex);
            formdata.append("telephone",telephone);
            var token = layui.data('token').data;
            $.ajax({
                url:"/user/update",//这里是请求的地址
                type: 'POST',
                data: formdata,
                headers:{"token":token},
                dataType: "json",
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success:function(result){
                    // window.location.href = "admin.html"
                }
                ,error:function(result){

                }
            });
        });
    });
</script>
</body>
</html>